<template>
  <view style="background-color: #181816; height: auto;">
    <!-- 头部导航栏固定 -->
    <view class="header" style="">
      <view class="header_box">
        <!--头部标题-->
        <view
          class="header_title"
          style="background-color: #181816; letter-spacing: 2rpx;"
        >
          <image src="/static/title.png" mode="aspectFit" />
        </view>
        <!-- 消息通知 -->
        <view class="header_message" @tap="noticeCenter()">
          <image src="/static/message.png"></image>
        </view>
      </view>
    </view>
    <view class="content">
      <!-- 轮播图 -->
      <view class="swiper_box">
        <!-- 暂时是个图片展示 -->

        <swiper
          class="swiper"
          circular
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item
            class="swiper-item"
            v-for="(res, index) in banner_list"
            :key="index"
          >
            <image :src="res.image_url"></image>
          </swiper-item>
        </swiper>
      </view>
      <!-- 公告 -->
      <view class="latest_notice">
        <view class="title">
          <image src="/static/notice.png" mode="aspectFit" />
        </view>
        <scroll-view class="notice_box">
          <!-- 轮播文字 -->
          <swiper
            class="notice_title"
            circular
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            :vertical="vertical"
          >
            <swiper-item
              class="notice_item"
              v-for="(res, index) in notice_list"
              :key="index"
            >
              <text @tap="noticeDetail(res.notice_id)">{{ res.title }}</text>
            </swiper-item>
          </swiper>
        </scroll-view>
        <view class="notice_btn" @click="noticeCenter()">
          <image src="../../static/notice_right.png"></image>
        </view>
      </view>
      <!-- 滑块选择 -->
      <view class="switch_block">
        <view
          :class="[
            { active: active == index },
            { left: active == 0 },
            { right: active == 1 },
            `item`,
          ]"
          @click="blockClick(index)"
          v-for="(item, index) in data"
          :key="index"
        >
          {{ item }}
        </view>
      </view>
      <!-- 活动列表 -->
      <view v-show="activityList" class="content-list">
        <view
          class="content_box"
          v-for="(res, index) in activity_list"
          :key="index"
        >
          <!-- 活动封面图 -->
          <view
            class="content_img"
            @click="seriesDetails(res.activity_id, res.collect_id, index)"
          >
            <image :src="res.series.cover"></image>
          </view>
          <!-- 活动文字介绍 -->
          <view class="content_text">
            <!-- 活动名 -->
            <view class="content_title">{{ res.name }}</view>
            <!-- 活动数量，发行方式 -->
            <view class="content_countBox">
              <!-- 活动下藏品数量 -->
              <view class="count">
                <!-- 图标 -->
                <image src="../../static/count_icon.png"></image>
                <!-- 总份数 -->
                <view class="total">限量{{ res.total_show_number }}份</view>
                <!-- 共几款 -->
                <view class="models">共{{ res.total_collect }}款</view>
              </view>
              <!-- 活动发行类型（字的长度可能不同） -->
              <view class="types">{{ res.flag }}</view>
            </view>
            <!-- 发行商 -->
            <view class="content_host">
              <view class="host_logo">
                <image :src="res.brand_info.icon_image"></image>
              </view>
              <text>{{ res.brand_info.brand_name }}</text>
            </view>
          </view>
          <!-- 查看活动详情 -->
          <view
            class="content_btn"
            @click="seriesDetails(res.activity_id, res.collect_id, index)"
            v-show="!res.is_end"
          >
            <button>立即查看</button>
          </view>
          <!-- 已结束 -->
          <view
            class="end_btn"
            @click="seriesDetails(res.activity_id, res.collect_id, index)"
            v-show="res.is_end"
          >
            <button>已结束</button>
          </view>
        </view>
        <!-- 水印 -->
        <view class="watermark">
          <image
            mode="aspectFit"
            src="../../static/zxl_yde.png"
            style="width: 100%; height: 100%;"
          ></image>
        </view>
        <!-- 动态数据 -->
      </view>

      <!-- 发行预告 -->
      <view v-show="advanceNotice" class="content-list">
        <view
          class="advance_list"
          v-for="(res, index) in advance_list"
          :key="index"
          @click="collectionDetails(res.activity_id, res.collect_id, index)"
        >
          <view class="advance_box">
            <!-- 定位预告发行时间 -->
            <view class="advance_time">
              {{ res.begin_time_more }}
            </view>
            <!-- 预告内容 -->
            <view class="advance_content">
              <view class="advance_img">
                <image :src="res.series.cover"></image>
              </view>
              <view class="advance_text">
                <!-- 活动名 -->
                <view class="content_title">{{ res.name }}</view>
                <!-- 活动数量，发行方式 -->
                <view class="content_countBox">
                  <!-- 活动下藏品数量 -->
                  <view class="count">
                    <!-- 图标 -->
                    <image src="../../static/count_icon.png"></image>
                    <!-- 总份数 -->
                    <view class="total">限量{{ res.total_show_number }}份</view>
                    <!-- 共几款 -->
                    <view class="models">共{{ res.total_collect }}款</view>
                  </view>
                  <!-- 活动发行类型（字的长度可能不同） -->
                </view>
                <view class="types">{{ res.flag }}</view>
                <!-- 发行商 -->
                <view class="content_host">
                  <view class="host_logo">
                    <image :src="res.brand_info.icon_image"></image>
                  </view>
                  <text>{{ res.brand_info.brand_name }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 水印 -->
        <view
          class="watermark"
          style="
            width: 34%;
            height: 48rpx;
            padding: 80rpx 0 100rpx 0;
            margin: auto;
          "
        >
          <image
            src="../../static/zxl_yde.png"
            style="width: 100%; height: 100%;"
          ></image>
        </view>
      </view>
    </view>
    <!-- 未登录情况的提示栏固定 -->
    <view class="fixed_tabbar" v-show="!hasLogin">
      <view class="content">
        <view class="notice_text">
          <text class="isLogin" v-show="isLogin">
            *您还未登录，暂无法参与活动
          </text>
          <text class="isVerify" v-show="isVerify">
            *您还未实名认证，暂无法参与活动
          </text>
        </view>
        <view class="method_btn">
          <button v-show="isLogin" @click="Login()">登录</button>
          <button v-show="isVerify" @click="Verify()">实名认证</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/request/api.js'

export default {
  data() {
    return {
      /* swiper */
      indicatorDots: true,
      autoplay: true,
      interval: 3500,
      duration: 500,
      vertical: true, //滑动方向是否为纵向
      /* 选择块 */
      active: 0,
      activityList: true,
      advanceNotice: false,
      collection_id: '',
      page: 1,
      data: ['精选推荐', '发行预告'],
      /* screen */
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      /* 活动列表 */
      activity_list: [],
      /* banner列表 */
      banner_list: [],
      /* 最新通告列表 */
      notice_list: [],
      /* 预告列表 */
      advance_list: [],
      /* 底部提示 */
      isLogin: true,
      hasLogin: false,
      isVerify: false,
      src: 'http://publish.onedaen.com',
    }
  },
  onShow() {
	/* 验证是否登录 */
	let hasLogin = uni.getStorageSync('hasLogin')
	this.hasLogin=hasLogin
	const info = uni.getStorageSync('userInfo')
	this.userInfo = info
	console.log(this.hasLogin)
	if (hasLogin==false) {
		   this.isLogin=true
	}else if(hasLogin==true&&info.is_auth == 1){
		console.log(111)
		   this.isVerify = true
		   this.hasLogin = false
		   this.isLogin = false
	}
	this.index()
  },
  mounted(){
  /* 验证是否登录 */
  let hasLogin = uni.getStorageSync('hasLogin')
  this.hasLogin=hasLogin
  const info = uni.getStorageSync('userInfo')
  this.userInfo = info
  console.log(this.hasLogin)
  if (hasLogin==false) {
  	   this.isLogin=true
  }else if(hasLogin==true&&info.is_auth == 1){
  	   console.log(555)
  	   this.isVerify = true
  	   this.hasLogin = false
  	   this.isLogin = false
  }
  },
  onLoad() {
   /* 验证是否登录 */
   let hasLogin = uni.getStorageSync('hasLogin')
   this.hasLogin=hasLogin
   const info = uni.getStorageSync('userInfo')
   this.userInfo = info
   console.log(this.hasLogin)
   if (hasLogin==false) {
	   this.isLogin=true
   }else if(hasLogin==true&&info.is_auth == 1){
	   console.log(555)
	   this.isVerify = true
	   this.hasLogin = false
	   this.isLogin = false
   }
   this.index()
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height

    this.index()
  },
  methods: {
    /* 块选择 */
    blockClick(id) {
      /* 微信小程序v-show里面不能写表达式判断 */
      this.active = id
      if (id == 0) {
        console.log(id)
        this.page = 1
        this.activityList = true
        this.advanceNotice = false
        /* 请求精彩推荐接口 */
        this.index()
      } else if (id == 1) {
        this.page = 1
        console.log(id)
        /* 请求发布预告接口 */
        // this.notice()
        setTimeout(() => {
          this.activityList = false
          this.advanceNotice = true
        }, 200)
        this.Advance()
      }
    },
    /* 消息中心 */
    noticeCenter() {
      uni.navigateTo({
        url: '../message/notice',
      })
    },
    /* 用户登录实名状态 */
    //登录
    Login() {
      uni.navigateTo({
        url: '../login/login',
      })
    },
    //实名
    Verify() {
      uni.navigateTo({
        url: '../verify/verify',
      })
    },
    /* 接口请求 */
    //首页
    index() {
      api
        .getIndex({
          page: this.page,
		  // is_experience:1//测试数据字段
        })
        .then((res) => {
          console.log('首页信息接口返回:', res)
          if (!res.data.activity_info.data.length == 0 && this.page == 1) {
            this.activity_list = res.data.activity_info.data
          } else if (
            !res.data.activity_info.data.length == 0 &&
            this.page > 1
          ) {
            let more = res.data.activity_info.data
            for (let i = 0; i < more.length; i++) {
              this.activity_list.push(more[i])
            }
          }
          // if(this.page>1){
          // if (!res.data.activity_info.data.length == 0) {
          //   let more=res.data.activity_info.data
          //   for(let i=0;i<more.length;i++){
          //   	this.activity_list.push(more[i])
          //   }
          // }

          // }
          this.notice_list = res.data.notice_info
          this.banner_list = res.data.banner_info
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //精彩推荐
    // recommend() {
    // 	api.getRecommend({
    // 		'page': '1'
    // 	}).then(res => {
    // 		console.log('首页信息接口返回:', res)
    // 		this.activity_list = res.data.data
    // 		this.notice_list = res.data.data
    // 		console.log(this.activity_list)
    // 	}).catch(err => {
    // 		console.log(err)
    // 	})
    // },
    // 发行预告
    Advance() {
      api
        .getIndex({
          page: this.page,
          is_preview: 1,
		  // is_experience:1//测试数据字段
        })
        .then((res) => {
          console.log('发行返回:', res)
          if (!res.data.activity_info.data.length == 0 && this.page == 1) {
            this.advance_list = res.data.activity_info.data
          } else if (
            !res.data.activity_info.data.length == 0 &&
            this.page > 1
          ) {
            let more = res.data.activity_info.data
            for (let i = 0; i < more.length; i++) {
              this.advance_list.push(more[i])
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    /* 下拉刷新 */
    onPullDownRefresh() {
      let _this = this
      this.page = 1
      setTimeout(() => {
        uni.stopPullDownRefresh()
        this.index()
        this.Advance()
      }, 500)
    },
    // 触底翻页
    onReachBottom() {
      this.page = this.page + 1
      /* 开始请求数据 */
      this.index()
      this.Advance()
    },
    // 跳转活动详情
    seriesDetails(acticity_id, collection_id, index) {
      let total_collection = this.activity_list[index].total_collect
      if (collection_id == 0) {
        uni.navigateTo({
          url: '../details/series_detail?id=' + acticity_id,
        })
      } else {
        if (total_collection == 1 && !this.collection_id) {
          /* 带活动id，藏品id */
          uni.navigateTo({
            url:
              `../details/collection_detail?activity_id=` +
              acticity_id +
              `&collection_id=` +
              collection_id, //带参数给藏品详情
          })
        } else {
          uni.navigateTo({
            url: '../details/series_detail?id=' + acticity_id,
          })
        }
      }
    },
    collectionDetails(acticity_id, collection_id, index) {
      let total_collection = this.advance_list[index].total_collect
      if (collection_id == 0) {
        uni.navigateTo({
          url: '../details/series_detail?id=' + acticity_id,
        })
      } else {
        if (total_collection == 1 && !this.collection_id) {
          /* 带活动id，藏品id */
          uni.navigateTo({
            url:
              `../details/collection_detail?activity_id=` +
              acticity_id +
              `&collection_id=` +
              collection_id, //带参数给藏品详情
          })
        } else {
          uni.navigateTo({
            url: '../details/series_detail?id=' + acticity_id,
          })
        }
      }
    },
    getCollection(id) {
      api
        .getActivityDetail({
          activity_id: id,
        })
        .then((res) => {
          this.collection_id = res.data.collection_info[0].collection_id
        })
        .catch((err) => {
          console.log(err)
        })
    },
    /* 消息详情页 */
    noticeDetail(id) {
      uni.navigateTo({
        url: '../message/notice_detail?id=' + id,
      })
    },
    /* swiper方法 */
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay
    },
    intervalChange(e) {
      this.interval = e.target.value
    },
    durationChange(e) {
      this.duration = e.target.value
    },
  },
  computed: {
    getDate() {
      return (item) => {
        const time = new Date(item.begin_time)
        console.log('time', time)
        const timer = `${
          time.getMonth() < 9
            ? '0' + (time.getMonth() + 1)
            : time.getMonth() + 1
        }月${
          time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
        }日 ${time.getHours()}:${
          time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
        } 发行`
        return timer
      }
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #181816;
}

/* header */
.header {
  position: sticky;
  width: 100%;
  top: 0;
  background-color: #181816;
  z-index: 999;
  padding-top: calc(140rpx + var(--status-bar-height));
  padding-bottom: 20rpx;

  .header_box {
    display: flex;
    justify-content: space-between;
    // width: 90%;
    width: 685rpx;
    margin: auto;
    align-items: center;

    .header_title {
      // font-family: HYYAKUHEI;
      // background-image: linear-gradient(-90deg, #f0c611 6%, #4effff 100%),
      //   linear-gradient(#dcb71a, #dcb71a);
      // background-clip: text;
      // font-size: 45rpx;
      // font-weight: bold;
      // -webkit-background-clip: text;
      // color: transparent;
      // line-height: 100%;
      image {
        width: 287.5rpx;
        height: 42rpx;
      }
    }

    .header_message {
      width: 60rpx;
      height: 60rpx;
      background-color: #000000;
      border-radius: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* 轮播图 */
.swiper_box {
  //   width: 90%;
  width: 685rpx;

  margin: 0 auto 0 auto;
  // border-radius: 50rpx;
  // overflow: hidden;
  .swiper {
    height: 260rpx;
    transform: translateY(0); // 关键代码
    border-radius: 50rpx;
    overflow: hidden;
  }

  .swiper-item {
    display: block;
    height: 260rpx;
    line-height: 260rpx;
    text-align: center;

    image {
      width: 100%;
      height: 100%;
      // border-radius: 20rpx;
    }
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  /* 修改指示点样式 */
  /* #ifdef MP-WEIXIN */
  wx-swiper .wx-swiper-dot {
    width: 6rpx;
    height: 6rpx;
    border-radius: 100%;
  }

  wx-swiper .wx-swiper-dot-active {
    background-color: #fff;
    width: 20rpx;
    border-radius: 5rpx;
  }

  /* #endif */
}

/* 最新通告 */
.latest_notice {
  position: relative;
  display: flex;
  vertical-align: middle;
  align-items: middle;
  width: 685rpx;
  margin: 47rpx auto 43rpx;
  height: 110rpx;
  background-color: #242424;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx 23rpx;
  .title {
    width: 70rpx;
    height: 65rpx;
    image {
      width: 70rpx;
      height: 65rpx;
    }
    // width: 74rpx;
    // // padding: 20rpx 25rpx;
    // line-height: 36rpx;
    // font-size: 33rpx;
    // font-style: italic;
    // font-weight: bold;
    // font-family: TTCHAOHEIJ;
    // letter-spacing: 0rpx;
    // color: transparent;
    // background-clip: text;
    // background-image: linear-gradient(360deg, #f0c611 0%, #4effff 100%);
  }

  .notice_box {
    width: 100%;
    margin-top: 18rpx;
    height: 38rpx;
    margin-left: 19rpx;
    border-left: 1.5rpx solid #4d4d4d;
    font-size: 28rpx;
    color: #a6a6a6;
    flex: 1;
    .notice_title {
      width: 100%;
      height: 100%;
    }
  }

  .notice_item {
    height: 30rpx;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 30rpx;
    text {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      //   width: 360rpx;
      width: 85%;
      padding-right: 50rpx;
    }
  }

  .notice_btn {
    image {
      position: absolute;
      right: 23rpx;
      //   right: 5%;
      //   top: 40rpx;
      width: 36rpx;
      height: 36rpx;
      transform: translateY(-50%);
      top: 50%;
    }
  }
}

/* 选择块 */
.switch_block {
  display: flex;
  align-items: center;
  //   padding-right: 10%;
  color: $uni-text-color;
  background-color: #181816;
  //   width: 100%;
  width: 685rpx;
  margin: 0 auto;
  font-size: 33rpx;
  color: #b3b3b3;
  width: 685rpx;

  .active {
    font-size: 40rpx;
    color: #4effff;
    font-weight: 500;

    // padding: 0 20rpx;
    // background: transparent;
    // background-clip: padding-box, border-box;
    // background-origin: padding-box, border-box;
    // background-image: linear-gradient(135deg, #181816, #181816),
    //   linear-gradient(to left, #181816 25%, #4effff, #181816 75%);
    // border-bottom: 3px transparent solid;
    &::before {
      content: '';
      display: block;
      height: 8rpx;
      position: absolute;
      bottom: -9rpx;
      width: 95rpx;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(to right, #181816, #4effff, #181816);
      //   background: transparent;
      //   background-clip: padding-box, border-box;
      //   background-origin: padding-box, border-box;
      //   background-image: linear-gradient(135deg, #181816, #181816),
      //     linear-gradient(to left, #181816 25%, #4effff, #181816 75%);
    }
  }
  .item {
    position: relative;
    width: 160rpx;
    margin-right: 50rpx;

    text-align: center;
  }
  //   .left {
  //     margin-right: 60rpx;
  //   }

  //   .right {
  //     margin-left: 45rpx;
  //   }
}

/* 预告 */
.advance_list {
  padding: 25rpx 0;

  .advance_box {
    position: relative;
    width: 690rpx;
    box-sizing: border-box;
    height: fit-content;
    background-color: #282a2c;
    border-radius: 20rpx;
    margin: 30rpx auto 0;
    padding: 43rpx 20rpx 20rpx;
    /* 渐变效果 */
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(135deg, #282a2c, #282a2c),
      linear-gradient(to left, #282a2c, #4effff, #282a2c);
    border-top: 1px transparent solid;

    &:first-child {
      margin-top: 0;
    }

    .advance_time {
      border-radius: 4rpx;
      position: absolute;
      top: -20rpx;
      left: 205rpx;
      min-width: 280rpx;
      margin: auto;
      text-align: center;
      color: #4effff;
      font-size: 24rpx;
      line-height: 40rpx;
      /* 渐变效果 */
      background-color: #282a2c;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      z-index: 1;
      box-sizing: border-box;
      border: 1px #4effff solid;
    }

    .advance_content {
      display: flex;
      width: 100%;
      //   margin: auto;

      .advance_img {
        width: 250rpx;
        height: 250rpx;
        border-radius: 20rpx;
        min-width: 250rpx;
        border: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }

      .advance_text {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;

        .content_title {
          font-family: PingFang-SC-Medium;
          width: 100%;
          font-size: 36rpx;
          letter-spacing: 0rpx;
          color: #ffffff;
          margin: 14rpx 0 25rpx;
          word-break: break-all;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        /* 发行数量 */
        .content_countBox {
          display: flex;
          font-size: 24rpx;
          margin-bottom: 24rpx;
          //   height: 40rpx;
          //   line-height: 40rpx;

          .count {
            display: flex;
            align-items: center;
            height: 40rpx;
            letter-spacing: 1rpx;
            background-color: #d3ae82;
            border: #d3ae82 2rpx solid;
            border-radius: 5rpx;
            image {
              margin: 6rpx 10rpx;
              width: 24rpx;
              height: 28rpx;
              line-height: 40rpx;
            }

            .total {
              text-align: center;
              height: 100%;
              // line-height: 40rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: bold;
            }

            .models {
              min-width: 80rpx;
              max-width: 150rpx;
              text-align: center;
              // line-height: 40rpx;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              // border-radius: 5rpx;
              margin-left: 10rpx;
              //   border: 1rpx solid #d3ae82;
              background-color: #181816;
              color: #d3ae82;
            }
          }
        }
        .types {
          margin-bottom: 12rpx;
          display: flex;
          align-items: center;
          padding: 0 12rpx;
          height: 42rpx;
          font-size: 24rpx;
          width: fit-content;
          text-align: center;
          background-image: linear-gradient(
              102deg,
              #d8a0d8 0%,
              #a4bbe5 41%,
              #cdffd7 100%
            ),
            linear-gradient(#181816, #181816);
          background-blend-mode: normal, normal;
          line-height: 38rpx;
          border-radius: 5rpx;
        }

        .content_host {
          display: flex;
          align-items: center;

          .host_logo {
            width: 50rpx;
            height: 50rpx;
            border-radius: 30rpx;
            border: 0;

            image {
              width: 100%;
              height: 100%;
              border-radius: 30rpx;
              border: 0;
            }
          }

          text {
            font-family: PingFang-SC-Medium;
            font-size: 26rpx;
            line-height: 60rpx;
            margin-left: 20rpx;
            color: #ccc;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.content {
  padding-top: 28.5rpx;
  height: auto;

  .content-list {
    margin-top: 62rpx;
    width: 685rpx;
    margin: 62rpx auto 0;
    box-sizing: border-box;
    .content_box {
      width: 100%;
      height: auto;
      margin: auto;
      background-color: #282a2c;
      border-radius: 20rpx;
      margin-top: 30rpx;
      padding-bottom: 40rpx;

      &:first-child {
        margin-top: 0;
      }
    }
  }

  .content_img {
    width: 100%;
    height: 685rpx;
    margin: auto;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }

  .content_text {
    margin-left: 35rpx;
    margin-top: 35rpx;

    /* 活动名 */
    .content_title {
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      font-weight: 500;
      letter-spacing: 0rpx;
      color: #ffffff;
      word-break: break-all;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    /* 发行数量 */
    .content_countBox {
      display: flex;
      font-size: 24rpx;
      margin-top: 35rpx;
      height: 38rpx;

      .count {
        display: flex;
        align-items: center;
        letter-spacing: 1rpx;
        background-color: #d3ae82;
        overflow: hidden;
        border-radius: 5rpx;
        border: 1rpx solid #d3ae82;
        box-sizing: border-box;
        height: 38rpx;
        image {
          margin: 6rpx 10rpx;
          width: 24rpx;
          height: 28rpx;
        }

        .total {
          text-align: center;
          margin-right: 7rpx;
          height: 35rpx;
          font-weight: bold;
        }

        .models {
          padding: 0 10rpx 0 10rpx;
          height: 35rpx;
          list-style: none;
          //   box-sizing: border-box;
          //   text-align: center;
          //   border-radius: 5rpx;
          //   margin-left: 10rpx;

          background-color: #181816;
          color: #d3ae82;
        }
      }

      .types {
        margin-left: 20rpx;
        padding: 0 12rpx;
        height: 38rpx;
        text-align: center;
        background-image: linear-gradient(
            102deg,
            #d8a0d8 0%,
            #a4bbe5 41%,
            #cdffd7 100%
          ),
          linear-gradient(#181816, #181816);
        background-blend-mode: normal, normal;
        line-height: 38rpx;
        border-radius: 5rpx;
      }
    }

    /* 发行商 */
    .content_host {
      display: flex;
      margin-top: 35rpx;
      align-items: center;

      .host_logo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
        border: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 30rpx;
          border: 0;
        }
      }

      text {
        font-family: PingFang-SC-Medium;
        font-size: 30rpx;
        line-height: 60rpx;
        margin-left: 20rpx;
        color: #cccccc;
        vertical-align: middle;
      }
    }
  }

  .content_btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    margin: 35rpx auto 0;
    background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    border-radius: 40rpx;

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      margin: auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      color: #000;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      font-weight: bold;
      border-radius: 40rpx;
    }
  }

  .end_btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    margin: 35rpx auto 0;
    border-radius: 40rpx;

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      margin: auto;
      background-color: #737373;
      color: #000;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      font-weight: 500;
      border-radius: 40rpx;
    }
  }
}

.fixed_tabbar {
  bottom: calc(var(--window-bottom));
  height: 80rpx;
  width: 100%;
  background-color: rgba(36, 36, 36, 0.8);
  position: fixed;

  .content {
    display: flex;
    justify-content: space-between;

    width: 90%;
    padding: 0;
    margin: auto;

    .notice_text {
      line-height: 80rpx;
      font-size: 22rpx;
      color: #ffffff;
    }

    .method_btn {
      height: 40rpx;
      background-color: #4ffffe;
      border-radius: 22rpx;
      margin: 20rpx 0;
      text-align: center;
      vertical-align: middle;

      button {
        background-color: #4ffffe;
        border-radius: 22rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 22rpx;
        border: 0;
      }
    }
  }
}

/*登录弹框*/
.showLoginMask {
  width: 600rpx;
  margin: auto;

  .title {
    font-size: 33rpx;
    padding: 30rpx 0;
    font-weight: bold;
    text-align: center;
  }

  .subTitle {
    font-size: 22rpx;
    text-align: center;

    text {
      font-weight: bold;
      color: #999999;
    }
  }

  .input {
    display: flex;
    flex-direction: column;
    width: 80%;
    font-size: 26rpx;
    margin: 60rpx auto 0;

    .phone {
      display: flex;
      width: 100%;
      padding-bottom: 5rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1rpx solid #ccc;

      select {
        background: none;
        border: 0;
      }

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin: 0 30rpx;
      }

      button {
        min-width: 160rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 15rpx 0;
        font-size: 22rpx;
        font-weight: 300;
        background-color: #4effff;
        border-radius: 20rpx;
        border: 0;
      }
    }

    .code {
      display: flex;
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      padding-bottom: 5rpx;
      border-bottom: 1rpx solid #ccc;

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin: 0 54rpx;
      }
    }
  }

  .submit_btn {
    width: 80%;
    margin: 70rpx auto 30rpx;
    height: 80rpx;
    border: 0;

    button {
      height: 80rpx;
      line-height: 80rpx;
      margin: 30rpx auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 36rpx;
      font-size: 24rpx;
      border: 0;
    }
  }

  .agree_read {
    width: 80%;
    margin: auto;
    font-size: 26rpx;
    letter-spacing: 0rpx;
    color: #999999;
    padding-bottom: 80rpx;
    text-align: center;

    text {
      color: #4effff;
    }
  }
}

// 注册弹窗
.showRegisterMask {
  width: 600rpx;
  margin: auto;
  padding: 40rpx 0 20rpx 0;

  .content_text {
    width: 80%;
    margin: 50rpx auto;
    font-size: 26rpx;
    color: #4d4d4d;
  }
}
.watermark {
  width: 260rpx;
  height: 48rpx;
  padding: 62rpx 0;
  margin: auto;
}
</style>
